<template>
  <!--https://segmentfault.com/q/1010000017908355-->
  <div class="content">
    <h1 class="title">
      <slot name="title"></slot>
      <hr/>
    </h1>
    <ul>
      <li>
        <div class="song-item">
          <span class="item-index"></span>
          <span class="item-title2">操作种类</span>
          <span class="item-pic">操作详情</span>
          <span class="item-intro">操作时间</span>
          <!--<span class="item-last"></span>-->
        </div>
      </li>
      <li v-for="(item,index) in songList" :key="index" style="line-height: 120px;height: 120px">

        <div class="song-item">
                   <span class="item-index">
                       {{index + 1}}
                   </span>
          <!--<span class="item-index"></span>  /identify-details/get_pic/-->
          <span class="item-pic"><img style="height: 100px;margin-top: 10px"
                                      :src="attachImage(`${item.id}`)"></span>
          <span class="item-title">{{item.ocrNum}}</span>
          <!--<span class="item-title">{{item.modifyNum}}</span>-->
          <span class="item-title2">
             <el-select v-model="item.modifyNum" placeholder="请选择" size="mini"
                        style="margin-right: 20px;width: 120px;display: block"
                        @change="correct(index+1, item.id,item.ocrNum,item.modifyNum,item.modifyCount)">
              <el-option
                v-for="op in options"
                :key="op.value"
                :label="op.label"
                :value="op.value">
              </el-option>
            </el-select>
          </span>
          <span class="item-name">{{item.modifyCount}}</span>
          <span class="item-intro">{{dateDeal(item.updateTime)||'未纠错过'}}</span>
          <!--                   <span class="item-title">{{replaceFName(item.name)}}</span>
                             <span class="item-name">{{replaceLName(item.name)}}</span>
                             <span class="item-intro">{{item.introduction}}</span>-->
          <!--<span class="item-last"><el-button size="mini"-->
          <!--@click="correct(index, item.id,item.modifyNum,item.modifyCount)"-->
          <!--type="primary">立即纠错</el-button></span>-->
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import {mapGetters} from "vuex";
  import {mixin} from "../mixins";
  import {updateModifiedDetailsNum, addUsersModifyCount} from '../api/index';

  export default {
    name: 'album-content',
    mixins: [mixin],
    props: [
      'songList'
    ],
    data() {
      return {
        options: [{
          value: 0,
          label: '0'
        }, {
          value: 1,
          label: '1'
        }, {
          value: 2,
          label: '2'
        }, {
          value: 3,
          label: '3'
        }, {
          value: 4,
          label: '其他'
        }]
      }
    },
    computed: {
      ...mapGetters([
        'loginIn',          //用户是否已登录
        'userId',           //当前登录用户id
      ])
    },
    methods: {
      correct(index, detailsId, ocrNum, modifyNum, modifyCount) {
        // 请求接口  小图id和修改的小图的数量
        // console.log(detailsId, modifyNum, modifyCount, new Date());
        this.songList[Number(index) - 1].modifyCount += 1;
        this.songList[Number(index) - 1].updateTime = new Date().toISOString();
        modifyCount = this.songList[Number(index) - 1].modifyCount;
        this.updateDetailsNum(detailsId, ocrNum, modifyNum, modifyCount, new Date());
      },
      updateDetailsNum(detailsId, ocrNum, modifyNum, modifyCount, nowdate) {
        let user = this.userId;
        let form = {};
        form['userId'] = user;
        form['ocrNum'] = ocrNum;
        form['modifyNum'] = modifyNum;
        form['modifyCount'] = modifyCount;
        form['updateTime'] = nowdate;
        form['id'] = detailsId;
        form = JSON.stringify(form);
        updateModifiedDetailsNum(form)
          .then(res => {  // 这里返回的是identify-details列表
            if (res.code === 200) {
              this.notify('纠错成功', 'success')
              // console.log("纠错成功")
            } else {
              // this.notify('用户名纠错次数加一出错', 'error');
              // console.log("纠错失败")
            }
          })
          .catch(err => {
            console.log("更新失败");
            this.notify('数量更新失败', 'error');
          });
        addUsersModifyCount(user)
          .then(res => {  // 这里返回的是identify-details列表
            if (res.code === 200) {
              // this.notify('识别操作加一', 'success')
            } else {
              // this.notify('用户名纠错次数加一出错', 'error');
            }
          })
          .catch(err => {
            // this.notify('用户名纠错次数加一出错', 'error');
          })
      },
      attachImage(identifydetails) {
        let url = '/identify-details/get_pic/' + identifydetails;
        return this.attachImageUrl(url);
      },
      dateDeal(utc_datetime) {
        //2020-11-30T11:14:37.456
        // 转为正常的时间格式 年-月-日 时:分:秒
        if (utc_datetime) {
          let T_pos = utc_datetime.indexOf('T');
          let Z_pos = utc_datetime.indexOf('.');
          let year_month_day = utc_datetime.substr(0, T_pos);
          let hour_minute_second = utc_datetime.substr(T_pos + 1, Z_pos - T_pos - 1);
          return year_month_day + " " + hour_minute_second; // 2017-03-31 08:02:06
        } else {
          return utc_datetime;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/album-content.scss';
</style>
